<script setup>
import { onMounted, ref } from 'vue'
import { useEcharts } from '../../js/useEcharts'
import { useOptions } from '../commonOption/option'
const { chartRoundOptionsFour, chartRoundOptionsFive, chartRoundOptionsSix } = useOptions()
// 第四个配置
const chartRoundContainerFour = ref(null)
const resFour = useEcharts(chartRoundContainerFour, chartRoundOptionsFour)

// 当前时间
const currentTime = ref('')
const updateTime = () => {
  return (currentTime.value = new Date().toLocaleString())
}
onMounted(() => {
  setInterval(() => {
    updateTime()
  }, 1000)
})
// 第五个配置
const chartRoundContainerFive = ref(null)
const resFive = useEcharts(chartRoundContainerFive, chartRoundOptionsFive)
// 第六个配置
const chartRoundContainerSix = ref(null)
const resSix = useEcharts(chartRoundContainerSix, chartRoundOptionsSix)
</script>

<template>
  <div class="right">
    <div class="new-time">当前时间： {{ currentTime }}</div>
    <div class="scenic">
      <div class="top">
        <div class="title">热门景区排行</div>
        <img src="../../images/dataScreen-title.png" alt="" />
      </div>
      <div class="main">
        <span style="margin-left: 30px">排名</span>
        <span style="margin-left: 40px">景区</span>
        <span style="margin-left: 60px">预约数量</span>
      </div>
      <div ref="chartRoundContainerFour" style="width: 360px; height: 200px"></div>
    </div>
    <div class="tourst">
      <div class="top">
        <div class="title">年度游客量对比</div>
        <img src="../../images/dataScreen-title.png" alt="" />
      </div>
      <div ref="chartRoundContainerFive" style="width: 360px; height: 250px"></div>
    </div>
    <div class="statistics">
      <div class="top">
        <div class="title">预约渠道数据统计</div>
        <img src="../../images/dataScreen-title.png" alt="" />
      </div>
      <div ref="chartRoundContainerSix" style="width: 360px; height: 250px"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.right {
  width: 4.5rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 30px;
  .new-time {
    width: 100%;
    height: 30px;
    background-image: url('../../images/dataScreen-header-right-bg.png');
    line-height: 30px;
    text-align: center;
    // padding-right: 30px;
    color: aquamarine;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: italic;
  }
  .top {
    width: 100%;
    height: 45px;
    .title {
      color: white;
      font-size: 16px;
      font-family: YouSheBiaoTiHei;
      margin-bottom: 6px;
      font-weight: 600;
      font-style: italic;
    }
  }
  .scenic {
    width: 360px;
    height: 300px;
    background: url(../../images/dataScreen-main-rt.png) no-repeat right top / 100%;
    .main {
      margin-top: 10px;
      width: 360px;
      height: 40px;
      background: url(../../images/rankingChart-bg.png) no-repeat center;
      color: yellowgreen;
      font-weight: 600;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      font-size: 16px;
      line-height: 40px;
    }
  }
  .tourst {
    width: 360px;
    height: 300px;
    background: url(../../images/dataScreen-main-rc.png) no-repeat;
    background-size: cover;
  }
  .statistics {
    width: 360px;
    height: 300px;
    background: url(../../images/dataScreen-main-rt.png) no-repeat;
    background-size: cover;
  }
}
</style>
